<!-- 全部订单页面1。该页面属于正常的Vue页面，正常书写代码结构，但对于订单列表这种页面来说页面性能不太好， -->
<template>
  <view v-if="shenheStatus == 0" class="cash">
    <view class="header-tabs">
      <u-tabs
        :list="list"
        :current="current"
        active-color="#FA230A"
        item-width="20%"
        @change="tabsChange"
        height="44"
        inactive-color="#262626"
      ></u-tabs>
    </view>
    <view
      style="
        padding: 20rpx;
        margin: 20rpx;
        border-radius: 10rpx;
        background: #ffffff;
      "
      v-for="(cashItem, cashIndex) in cashList"
      :key="cashIndex"
    >
      <view
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <view class="flex-w-1 u-m-r-10">
          <view class="u-line-1" style="line-height: 50rpx">
            <text v-if="cashItem.type_name" class="u-m-r-10">
              提现至{{ cashItem.type_name }}
            </text>
            <text style="color: red">￥{{ cashItem.price }}</text>
          </view>
          <view>{{ cashItem.addtime }}</view>
        </view>
        <view>
          {{ cashItem.status }}
        </view>
      </view>
      <view>
        <template v-if="cashItem.status_no == 2">
          <template v-if="cashItem.wx_cash_status === 0">
            微信自动打款（转账状态查询中）
          </template>
          <template v-else-if="[1, -1].includes(cashItem.wx_cash_status)">
            微信自动打款
          </template>
          <template v-else-if="cashItem.wx_cash_status === 3">
            微信自动打款（待确认：待商户确认, 符合免密条件时,
            系统会自动扭转为转账中）
          </template>
          <template v-else-if="cashItem.wx_cash_status === 4">
            微信自动打款（转账中：正在处理中，转账结果尚未明确）
          </template>
        </template>
        <template v-if="cashItem.wx_cash_status === 2">
          微信自动打款（打款失败：{{ cashItem.wx_cash_error }}）
        </template>
      </view>
    </view>
    <view v-if="noMore" style="text-align: center; line-height: 80rpx">
      -{{ $t("person.end") }}-
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: {
    Shenhe
  },
  data() {
    return {
      list: [
        {
          name: this.$t("person.cashStatus1"),
          status: 0
        },
        {
          name: this.$t("person.cashStatus2"),
          status: 1
        },
        {
          name: this.$t("person.cashStatus3"),
          status: 2
        },
        {
          name: this.$t("person.cashStatus4"),
          status: 3
        },
        {
          name: this.$t("person.cashStatus5"),
          status: 4
        }
      ],
      current: 0,
      cashList: [],
      noMore: false,
      cashType: 0 // 0: 分销, 1: 自提点 7:余额
    };
  },
  onLoad(t) {
    if (t.index) {
      this.current = t.index - 0;
    }
    uni.setNavigationBarTitle({
      title: this.$t("title.cashDetail")
    });
    if (t.cash_type) {
      this.cashType = t.cash_type;
    }
  },
  onShow() {
    this.page = 1;
    this.cashList = [];
    this.noMore = false;
    this.getCash();
  },
  methods: {
    tabsChange(e) {
      this.page = 1;
      this.cashList = [];
      this.noMore = false;
      this.current = e;
      this.getCash();
    },
    // 获取佣金列表
    async getCash() {
      const res = await this.$allrequest.share.cashDetail(
        {
          page: this.page,
          status: this.current - 1,
          cash_type: this.cashType
        },
        true
      );
      if (res.code == 0) {
        this.cashList = [...this.cashList, ...res.data.list];
        if (this.cashList.length >= res.data.row_count) {
          this.noMore = true;
        } else {
          this.noMore = false;
        }
      }
    }
  },
  onReachBottom() {
    if (!this.noMore) {
      this.page++;
      this.getCash();
    }
  }
};
</script>

<style lang="scss" scoped>
.cash {
  min-height: 100vh;
  padding-top: 90rpx;
  background-color: #f2f2f2;
  font-family: PingFang SC;
  color: #262626;
}
.header-tabs {
  width: 100%;
  padding-top: 20rpx;
  height: 90rpx;
  // line-height: 90rpx;
  background: #ffffff;
  position: fixed;
  top: 0;
  z-index: 1000;
  left: 0;
}
</style>
